<script setup>
import {ref} from "vue";
import {showToast} from "vant";
import {getUserLocal} from "@/utils/auth.js";
import {chanceUserDetail, uploadAvatarAPI} from "@/api/user.js";
import {useRouter} from "vue-router";

const regNamePwd = /^[a-z0-9]{3,12}$/i
const regPhone = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
const userForm = ref(getUserLocal())
const router = useRouter()
const avatarList = ref([{
  url: getUserLocal().avatar
}])
delete userForm.value.createtime
delete userForm.value.email
delete userForm.value.phone
const tmpWe=userForm.value.wechat
const tmpU=userForm.value.uid
const tmpQ=userForm.value.QQ
delete userForm.value.wechat
delete userForm.value.QQ
delete userForm.value.uid
userForm.value.weChat=tmpWe
userForm.value.uId=tmpU
userForm.value.qq=tmpQ
function afterRead(file) {
  file.status = 'uploading';
  file.message = '上传中...';
  console.log(file)
  uploadAvatarAPI(file, {uid: getUserLocal().uid}).then(result => {
    avatarList.value[0] = {url: result.data.data};
    console.log(avatarList.value[0].url)
    userForm.value.avatar = avatarList.value[0].url;
  });
  //设置用户表中的字段值

}

function onSubmit() {
  //注意传递过去的参数user的属性名
  let user = userForm;
  chanceUserDetail(userForm.value).then(() => {
    showToast('更新成功！');
    router.push({
      name: 'user'
    });
  });
  console.log(userForm.value)
}
</script>

<template>
  <div id="user-profile">
    <van-nav-bar
        title="个人信息"
        left-text="返回"
        left-arrow
        @click-left="$router.push('/user')">
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field label="用户编号" v-model="userForm.uId" type="text" readonly/>
      <van-field label="用户" v-model="userForm.uname" type="text" placeholder="请输入用户"
                 :rules="[{ pattern: regNamePwd, required: true, message: '无效用户名' }]"/>
      <van-field label="QQ" v-model="userForm.qq" type="text" placeholder="请输入qq号"/>
      <van-field label="微信" v-model="userForm.weChat" type="text" placeholder="请输入微信号"/>
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="userForm.sex" direction="horizontal">
            <van-radio :name="0">男</van-radio>
            <van-radio :name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="uploader" label="头像">
        <template #input>
          <van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead"/>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>

</style>